<template>
  <div class="contianer">
    <div class="left">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="闪电转铺" name="first">
          <div>
            <el-input type="text" placeholder="请填写您的手机号"></el-input>
          </div>
          <div>
            <el-button style="background:#FF5001;" @click="gopush(1)">闪电转铺</el-button>
          </div>
          <div>
            <el-button style="background:#ff7700" @click="goQiuzu">查看所有求租信息>></el-button>
          </div>
        </el-tab-pane>
        <el-tab-pane label="急速找铺" name="second">
          <div>
            <el-input type="text" placeholder="请填写您的手机号"></el-input>
          </div>
          <div>
            <el-button style="background:#ff9110;" @click="gopush(2)">急速找铺</el-button>
          </div>
          <div>
            <el-button style="background:#ff7700" @click="goQiuzu">查看所有求租信息>></el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="right">
      <div class="aaa">
        <p>最新找铺客户</p>
        <swiper
          :options="swiperFind"
          v-if="newFinds.length>0"
          style="height: 200px;overflow: hidden"
        >
          <swiper-slide
            class="new-item"
            v-for="(item, index) in newFinds"
            :key="index"
          >{{item.seekUserName}}{{item.seekUserPhone}}</swiper-slide>
        </swiper>
      </div>
      <div class="bbb">
        <p>转铺成功</p>
        <swiper
          :options="swiperFind"
          v-if="newSucess.length>0"
          style="height: 200px;overflow: hidden"
        >
          <swiper-slide
            class="new-item"
            v-for="(item, index) in newSucess"
            :key="index"
          >{{item.reName}}{{item.rePhone}}</swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  data() {
    return {
      activeName: "first",
      newSucess: [],
      newFinds: [],
      swiperFind: {
        slidesPerView: 5,
        direction: "vertical",
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        loop: true,
        autoplay: {
          delay: 2000,
          disableOnInteraction: false
        }
      }
    };
  },
  components: {
    swiper,
    swiperSlide
  },
  created() {
    this.getSucessNew();
  },
  filters: {
    filterPhone(str) {
      if (str) {
        let phone = str.substr(0, 3) + "*****" + str.substr(8);
        return phone;
      }
    }
  },
  methods: {
    gopush(index) {
      if (sessionStorage.getItem("isLogin") === "true") {
        switch (index) {
          case 1:
            this.$router.push("/push");
            return;
          case 2:
            this.$router.push("/pushneed");
        }
      } else {
        this.$router.push("/login");
      }
    },
    goQiuzu() {
      this.$router.push("/findshop");
      this.$store.state.activeIndex = "/findshop";
    },
    handleClick() {},
    //   最新找铺
    getSucessNew() {
      this.$http
        .get(this.$api.getNewOfflineAndSeek(), {
          params: {
            page: 1,
            limit: 10
          }
        })
        .then(res => {
          if (res.data.code === 0) {
            if (res.data.newOffline) {
              var arr = res.data.newOffline.list;
              var str=""
              for (var i = 0; i < arr.length; i++) {
                if(i>5){
                  str=arr[i].rePhone.substr(0, 3) + "*****" + arr[i].rePhone.substr(8);
                }else{
                  str=arr[i].rePhone
                }
                this.newSucess.push({
                  rePhone:str,
                  reName:arr[i].reName
                })
              }
            }
            if (res.data.newSeek.list) {
              this.newFinds = res.data.newSeek.list;
            }
          }
        });
    }
  }
};
</script>
<style scoped lang="less">
.contianer {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  .left {
    padding: 15px 80px 30px 80px;
    button {
      width: 100%;
      color: #fff;
    }
  }
  .right {
    padding: 30px 100px 10px 100px;
    p {
      font-size: 18px;
      margin-bottom: 10px;
    }
    ul li {
      font-size: 18px;
      line-height: 30px;
    }
    display: flex;
    justify-content: space-between;
  }
  .left,
  .right {
    width: 48%;
    background: #ecf0f3;
    button {
      margin-top: 20px;
      font-size: 16px;
    }
  }
}
</style>
